<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="15">
        <el-col :span="24">
          <MmvTitle title="方案配置"></MmvTitle>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方案名称" prop="longPlanName">
            <el-input
              v-model="form.longPlanName"
              placeholder="方案名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车型配置" prop="modelInfo">
            <el-input
              :value="form.modelInfo"
              readonly
              placeholder="品牌车系车型"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="showchexing = true"
              ></el-button>
            </el-input>
            <el-dialog
              title="品牌车系车型"
              :visible.sync="showchexing"
              width="900px"
              append-to-body
            >
              <el-table :data="configurationList" border>
                <el-table-column
                  label="品牌车系"
                  prop="modelInfo"
                  align="center"
                  min-width="140"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  label="车型名称"
                  prop="modelName"
                  align="center"
                  min-width="140"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  fixed="left"
                  width="120"
                >
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      @click="
                        ;(form.modelInfo = row.modelInfo+'/'+row.modelName),
                          (form.configurationId = row.configurationId),
                          (showchexing = false)
                      "
                      >选择</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="modeltotal>0" :total="modeltotal" :page.sync="configurationquery.pageNum"
                          :limit.sync="configurationquery.pageSize" @pagination="getConfigurationList"/>
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <MmvTitle title="价格配置"></MmvTitle>
        </el-col>
        <el-col :span="12">
          <el-form-item label="押金" prop="deposit">
            <el-input v-model="form.deposit" placeholder="押金"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月租金" prop="monthlyRent">
            <el-input
              v-model="form.monthlyRent"
              placeholder="月租金"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="付款支持" required="">
            <el-checkbox-group v-model="paymentSupports">
              <template v-for="item in dict.type.payment_support">
                <el-checkbox :label="item.value" :key="item.value">{{
                  item.label
                }}</el-checkbox>
              </template>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as planApi from '@/api/longPlan/plan'

export default {
  components: {
    MmvTitle,
  },
  dicts: ['payment_support'],
  props: ['id'],
  data() {
    return {
      loading: false,
      showchexing: false,
      configurationList: [],
      paymentSupports: [],
      configurationquery: {
        pageNum: 1,
        pageSize: 10,
        modelName: null,
        configurationId: null,
      },
      modeltotal:0,
      form: {
        modelInfo: '',
        longPlanName: '',
        configurationId: '',
        paymentSupport: '1',
        deposit: '',
        monthlyRent: '',
      },
      rules: {
        modelInfo: [{ required: true, message: '车型配置必选' }],
        longPlanName: [{ required: true, message: '方案名称必填' }],
        configurationId: [{ required: true, message: '车型配置必选' }],
        paymentSupport: [{ required: true, message: '车型配置必选' }],
        deposit: [
          { required: true, message: '押金必填' },
          {
            validator(rule, value, callback) {
              if (Number(value) >= 0) {
                callback()
              } else {
                callback('押金错误')
              }
            },
          },
        ],
        monthlyRent: [
          { required: true, message: '月租金必填' },
          {
            validator(rule, value, callback) {
              if (Number(value) >= 0) {
                callback()
              } else {
                callback('月租金错误')
              }
            },
          },
        ],
      },
    }
  },
  async mounted() {
    this.loading = true
    if (this.id) {
      await this.getData()
    }
    await this.getConfigurationList()
    this.loading = false
  },
  methods: {
    /** 获取车型业务配置列表 */
    async getConfigurationList() {
      const result = await planApi.configurationList(this.configurationquery)
      this.configurationList = result.rows || []
      this.modeltotal=result.total
    },
    getData() {
      return planApi.getPlan(this.id).then((response) => {
        this.form = response.data
        this.paymentSupports = this.form.paymentSupport.split(',')
        this.configurationquery.configurationId = response.data.configurationId
      })
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          resolve(valid)
        })
      })
    },
    emitData() {
      if (this.paymentSupports.length == 0) {
        this.$modal.msgError('至少选择一种付款方式')
        return
      }
      this.form.paymentSupport = this.paymentSupports.join(',')
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(this.form)
          }
        })
      })
    },
  },
}
</script>
